<script>
import {management} from "@/api/evaluationManagement/deleteDom";
import {
  editreturn,
  evaluation,
  managementTitleDel,
  titleAdd,
  titleDetails,
  titleEdit
} from "@/api/evaluationManagement/http";
import log from "@/views/monitor/job/log.vue";

export default {
  data() {
    return {
      dialogVisibleAddB: false,
      titlePro: '',
      textarea: '',
      // 新增数据
      addFormData: {
        assessmentId: this.$route.query.id,
        title: '',
        sort: 0,
        option: [{
          optname: "A",
          content: "",
          score: 0
        }, {
          optname: "B",
          content: "",
          score: 0
        }, {
          optname: "C",
          content: "",
          score: 0
        }, {
          optname: "D",
          content: "",
          score: 0
        },],
      },
      searchParams: {
        assessmentId: this.$route.query.id,
        pageSize: 15,
        pageNum: 2,
        title: ''
      },
      num: '0',
      ruleForm: {
        name: '',
      },
      rules: {
        inputcontent: [
          {required: true, message: '请输入内容', trigger: blur},
        ],
      },
      //

      text: '',

      // id: this.$route.query.id,
      // 选中数组
      ids: [],
      tableData: [],
      form: {
        title: '',
        searchValue: '',
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      titleDetails(this.searchParams).then(res => {
        this.tableData = res.rows
      })
    },
    // 编辑
    edit(id) {
      console.log(id)
      this.dialogVisibleAddB = true
      this.titlePro = '编辑'
      this.addFormData.id = id
      editreturn(id).then(res => {
        console.log(res)
        this.addFormData = res.data
      })

    },
    // 添加
    add() {
      delete this.addFormData.id
      this.dialogVisibleAddB = true
      this.titlePro = '添加'
      this.addFormData={
        assessmentId: this.$route.query.id,
        title: '',
        sort: 0,
        option: [{
          optname: "A",
          content: "",
          score: 0
        }, {
          optname: "B",
          content: "",
          score: 0
        }, {
          optname: "C",
          content: "",
          score: 0
        }, {
          optname: "D",
          content: "",
          score: 0
        },],
      }
    },

    handleChange(value) {
      console.log(value);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    // 确定
    save() {
      if (this.titlePro === '编辑') {
        titleEdit(this.addFormData).then(res => {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          })
          // console.log(res)
          this.getList()
          // this.addFormData=res.data
        })
      } else {
        titleAdd(this.addFormData).then(res => {
          console.log(res)
          this.dialogVisibleAddB = false
          this.$message({
            type: 'success',
            message: '恭喜你，添加成功!'
          })
          this.getList()
          // this.addFormData.title = ''
          // this.addFormData.option=[{
          //   optname: "A",
          //   content: "",
          //   score: 0
          // },{
          //   optname: "B",
          //   content: "",
          //   score: 0
          // },{
          //   optname: "C",
          //   content: "",
          //   score: 0
          // },{
          //   optname: "D",
          //   content: "",
          //   score: 0
          // }]
          // this.addFormData.sort = 0
        })

      }
      this.dialogVisibleAddB = false
    },

    // 重置
    replacement() {
      this.searchParams.title = ''
      this.getList()
    },
    // 删除
    handleDelete(rows) {
      let ids = rows.id || this.ids
      this.$modal.confirm('此操作将永久删除，是否确认？').then(function () {
        return managementTitleDel(ids).then((res) => {
          console.log(res)
        })
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getList()
      }).catch(() => {
      })
    },
    // 确认删除
    deleteOptions(index) {
      const a = 65
      this.addFormData.option.splice(index, 1)
      this.addFormData.option.forEach((item, index) => item.optname = String.fromCharCode(a + index))
    }
    ,
    addOptions() {
      this.addFormData.option.push({
        optname: String.fromCharCode(65 + this.addFormData.option.length),
        content: '',
        score: 0
      })
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<template>
  <div>
    <div class="container">
      <div class="evaluation">
        <!--        搜索-->
        <div class="search">
          <el-form class="search-title" ref="form" :model="form" label-width="80px" size="medium"
                   default-expand-all="true">
            <div class="title">
              <el-form-item label="题目名称">
                <el-input placeholder="请输入题目" v-model="searchParams.title" clearable></el-input>
              </el-form-item>
            </div>
            <div class="titleBtn">
              <el-row>
                <el-button @click="replacement">重置</el-button>
                <el-button type="primary" @click="getList">搜索</el-button>
              </el-row>
            </div>
          </el-form>
        </div>

        <div class="mange">
          <!--        管理表格-->
          <div class="addBtn">

            <el-button type="primary" @click="add"
                       style="color: white;padding: 10px 20px">
              添加
            </el-button>
          </div>


          <template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%;text-align: center; margin-left: 30px"
              @selection-change="handleSelectionChange" border>
              <el-table-column
                type="index"
                label="序号"
                width="120" class="center">
              </el-table-column>
              <el-table-column
                prop="title"
                label="测评名称">
              </el-table-column>
              <el-table-column
                label="操作"
                width="300">
                <template slot-scope="scope">


                  <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>

                  <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          </template>
        </div>
        <!--添加弹框-->
        <el-dialog :visible.sync="dialogVisibleAddB" :title=titlePro width="70%" :before-close="handleClose">
          <div class="setting">

            <div class="information">
              <div class="information-title">
                题目内容
              </div>
              <div class="information-content">
                <el-form ref="elForm" :model="addFormData" label-position="left" label-width="26px"
                         size="small">
                  <el-input
                    type="textarea"
                    placeholder="请输入题目内容"
                    v-model="addFormData.title"
                    resize="none"
                    maxlength="100"
                    show-word-limit

                  >
                  </el-input>
                </el-form>
              </div>
            </div>


            <div class="status">
              <!--              <el-form :rules="rules">-->
              <div class="optionsF">
                选项内容
              </div>
              <div class="optionContent">

                <div v-for="(item,index) in addFormData.option" class="Fixed">
                  <div class="inp">
                    <el-form :rules="rules">
                      <el-form-item :label="item.optname" prop="inputcontent">
                        <el-input class="inpIn"
                                  type="text"
                                  placeholder="请输入内容"
                                  v-model="item.content"
                                  maxlength="100"
                                  show-word-limit
                        >
                        </el-input>
                      </el-form-item>
                    </el-form>

                    <!--                                            <el-input-number  v-model="num" controls-position="right" @change="handleChange" :min="0" ></el-input-number>-->
                  </div>
                  <!--              </div>-->
                  <div class="counter">
                    <el-form>
                      <el-form-item>
                        <el-input-number style="width: 200px" v-model="item.score" controls-position="right"
                                         @change="handleChange" :min="0"></el-input-number>
                      </el-form-item>

                    </el-form>
                  </div>
                  <div v-show="addFormData.option.length>2" @click="deleteOptions(index)" class="el-icon-error"
                       style="font-size: 30px;color: #b5b5b5;margin-top: 4px">
                  </div>
                </div>
                <div class="addincrea" style="width: 30px;margin: 0 auto">
                  <el-button type="primary" style="margin: 0 auto" @click="addOptions">新增</el-button>
                </div>
              </div>
              <!--                </el-form>-->

              <!--          </div>-->


              <!--              </el-form>-->
              <!--      </div>-->

              <!--                    </div>-->
              <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleAddB = false">取 消</el-button>
              <el-button type="primary" @click="save">保存</el-button>
            </span>
            </div>
          </div>
        </el-dialog>


        <!--      </div>-->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: calc(100vh - 84px);
  background-color: #F2F3F4;
  padding: 10px 20px;

  .evaluation {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 30px 20px;
  }

  .search {
    width: 100%;

    .search-title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        width: 300px;
        margin-left: 30px;
      }

      .titleBtn {
        margin-right: 30px;
      }
    }

  }

  ::v-deep .el-dialog__header {
    width: 100%;
    background-color: #1892FF;
    padding: 20px;
    color: white;
    //margin-top: -30px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  .setting {
    width: 100%;
    display: flex;
    margin: 0px auto;
    justify-content: space-around;
    //align-items: center;
    flex-wrap: wrap;
    padding: 20px;

    .information {
      width: 100%;

      .information-title {
        width: 100%;
        border: 1px solid #ccc;
        background-color: #EDEDED;
        padding: 15px 20px 10px;
        font-weight: 600;
      }
    }

    ::v-deep form.el-form.demo-ruleForm {
      width: 100%;
    }

    //::v-deep .el-input-number.is-controls-right .el-input-number__decrease{
    //  bottom: 59px;
    //}

    //编辑弹框
    ::v-deep .el-dialog__body {
      padding: 0px;
    }

    .status {
      width: 100%;
      margin-top: 40px;

      .optionsF {
        width: 100%;
        border: 1px solid #ccc;
        background-color: #EDEDED;
        padding: 15px 20px 10px;
        font-weight: 600;
      }

      .optionContent {
        width: 100%;
        border: 1px solid #ccc;
        padding: 20px 0px;

        .Fixed {
          width: 100%;
          display: flex;
          justify-content: center;

        }
      }
    }
  }

  .inp {
    width: 50%;

    .inpIn {
      width: 90%;
    }
  }

  .counter {
    width: 20%;
  }

  ::v-deep .container .setting[data-v-991490b6] form.el-form.demo-ruleForm {
    width: 100%;
  }

  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }

  ::v-deep .el-dialog__body {
    padding: 0px;
  }

  ::v-deep .dialog-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }

  .addBtn {
    margin: 30px;
  }
}

.mange {
  width: 99%;
}

::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}

::v-deep .el-table .cell.el-tooltip {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f8;
}
</style>
